<template>
    <div class="fica-tion">
       <div class="box" v-for="value in item" :key="value.id" @click="details(value.id)">
          <img :src="value.recipesImage" />
          <p>{{value.recipesName}}</p>
          <span>{{value.browseCount}}浏览  {{value.collectCount}}收藏</span>
        </div>
    </div>
</template>

<script>
    export default {
        props:['item'],
        //分类中查看商品详情
        methods: {
            details(id){
            this.$router.push(`/details/${JSON.parse(sessionStorage.getItem('user')).id}/${id}`)
          }
        },
    }
</script>

<style lang="scss" scoped>
  .box{
    border: 1px solid #eee;
    display: inline-block;
    width: 35vw;
    margin: 1vw;
    img{
        width: 100%;
    }
    p{
        text-align: center;
        margin: 0;
        font-weight: 600;
        font-size: 14px;
        margin: 0 2vw;
    }
    span{
        font-weight: 200;
        font-size: 12px;
        margin: 0 5%;
    }
  }
</style>